<template>
  <div class="interface-admin">
    <div class="add-interface">
      <el-button type="primary" @click="addMenu()" v-if="searchInterface('permissions.store')">添加接口</el-button>
    </div>
    <div class="edit-interface">
      <el-tree
        :data="interfaces"
        :props="defaultProps"
        node-key="id"
        ref="tree"
        :expand-on-click-node="false"
        :render-content="renderContent"
      ></el-tree>
    </div>
    <!-- 新增菜单 -->
    <el-dialog
      :title="isAdd?'新增接口':'编辑接口'"
      :visible.sync="dialogVisible"
      width="35%"
      @close="cancel"
    >
      <el-form label-width="140px" :rules="rules" :model="inter_face" ref="interfaces">
        <!-- 接口 -->
        <div>
          <el-form-item label="接口名字" prop="name">
            <el-input v-model="inter_face.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="接口标题" prop="title">
            <el-input v-model="inter_face.title" clearable></el-input>
          </el-form-item>
          <el-form-item label="所属目录">
            <el-cascader
              :options="interfaces"
              :props="{...menuProps,checkStrictly:true}"
              v-model="interfaceOptions"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="是否启用?">
            <el-switch
              v-model="inter_face.is_enable"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel('interfaces')">取 消</el-button>
        <el-button type="primary" @click="submit('interfaces')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getPermissionList,
  addPermission,
  editPermission,
  deletePermission
} from '@/api/user-center/permission'
import { menu } from '@/utils'
export default {
  data() {
    return {
      interfaces: [],
      interfaceOptions: [],
      dialogVisible: false,
      root: true,
      isAdd: true,
      editData: [],
      inter_face: {
        name: '',
        title: '',
        parent_id: '',
        is_enable: true
      },
      rules: {
        title: [{ required: true, message: '请输入接口标题', trigger: 'blur' }],
        name: [{ required: true, message: '请输入接口名字', trigger: 'blur' }]
      },
      menuProps: {
        value: 'id',
        label: 'title'
      },
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  beforeMount() {
    this.getPermissionList()
  },
  methods: {
    handleChange(data) {},
    // 获取接口列表
    getPermissionList() {
      getPermissionList().then(res => {
        menu.handleMenu(res)
        this.interfaces = menu.generateMenu(res)
      })
    },
    // 新增或者编辑菜单
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const { is_enable } = this.inter_face
          let params = { ...this.inter_face }
          params.is_enable = is_enable ? 1 : 0
          params.parent_id =
            this.interfaceOptions[this.interfaceOptions.length - 1] || 0
          if (this.isAdd) {
            addPermission(params).then(() => {
              this.$message.success('新增成功')
              this.getPermissionList()
              this.dialogVisible = false
            })
          } else {
            editPermission(params).then(() => {
              this.$message.success('编辑成功')
              this.getPermissionList()
              this.dialogVisible = false
            })
          }
        }
      })
    },
    // 取消
    cancel(formName = 'interfaces') {
      this.$refs[formName].resetFields()
      this.dialogVisible = false
    },
    // 新增菜单
    addMenu() {
      this.isAdd = true
      this.dialogVisible = true
      this.root = true
      this.resetParams()
    },
    // 重置参数
    resetParams() {
      this.interfaceOptions = []
      this.inter_face = {
        name: '',
        title: '',
        parent_id: 0,
        is_enable: true
      }
    },
    // 删除菜单
    removeJurisdiction({ id }) {
      this.$confirm('此操作将永久删除该接口, 是否继续?', '删除菜单操作？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deletePermission(id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getPermissionList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editJurisdiction(data) {
      this.isAdd = false
      this.dialogVisible = true
      const { title, parent_id, name, id, is_enable, idList = [] } = data
      this.interfaceOptions = [...idList]
      this.inter_face = {
        title,
        parent_id,
        name,
        is_enable: is_enable === 1 ? true : false,
        id
      }
    },
    // 添加子接口
    addChild(data) {
      this.isAdd = true
      this.dialogVisible = true
      const { id, idList = [] } = data
      this.inter_face = {
        name: '',
        title: '',
        parent_id: 0,
        is_enable: true
      }
      this.interfaceOptions = [...idList, id]
    },
    renderContent(h, { node, data, store }) {
      let editJurisdiction
      let deleteJurisdiction
      if (this.searchInterface('permissions.update')) {
        editJurisdiction = (
          <el-button
            style="font-size: 12px;"
            type="text"
            on-click={() => this.editJurisdiction(data, store)}
          >
            编辑
          </el-button>
        )
      }
      if (this.searchInterface('permissions.destroy')) {
        deleteJurisdiction = (
          <el-button
            style="font-size: 12px;"
            type="text"
            on-click={() => this.removeJurisdiction(data, store)}
          >
            删除
          </el-button>
        )
      }
      return (
        <span style="flex:0.2;display: flex;align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
          <span>
            <span>{node.label}</span>
          </span>
          <span>
            {editJurisdiction}
            {deleteJurisdiction}
            <el-button
              style="font-size: 12px;"
              type="text"
              on-click={() => this.addChild(data)}
            >
              添加子接口
            </el-button>
          </span>
        </span>
      )
    }
  }
}
</script>

<style lang="scss">
.interface-admin {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  .add-interface {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
  }
  .edit-interface {
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 10px 20px;
    margin-bottom: 100px;
  }
}
</style>